<!--
 * @Description  : 合并表格
 * @Autor        : 杜康
 * @Date         : 2023-04-17 10:08:54 +0800
 * @LastEditors  : 杜康
 * @LastEditTime : 2023-04-27 17:51:30 +0800
-->
<template>
  <el-table :data="tableData" :span-method="objectSpanMethod" border :header-cell-style="headerCellStyle">
    <template v-for="(header, hKey) in headers">
      <el-table-column :prop="header.key" :label="header.text" :key="hKey" align="center">
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
import { isEmpty } from "lodash";
import { headerCellStyle } from "@/utils/utils.js";
export default {
  name: "MergeTable",
  props: {
    data: {
      type: Object,
      required: true,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      headerCellStyle,
      headers: [],
      // 表格数据
      tableData: [],
      // 存放所有的表头 一定要与tableData一致
      colFields: [],
      // 存储合并单元格的开始位置
      mergeCells: [],
    };
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        if (!isEmpty(newVal)) {
          this.init();
        }
      },
      deep: true,
    },
  },
  mounted() {
    if (!isEmpty(this.data)) {
      this.init();
    }
  },
  methods: {
    /**
     * @description: 合并单元格方法
     * @param {*} row
     * @param {*} column
     * @param {*} rowIndex
     * @param {*} columnIndex
     * @return {*}
     * @author: 杜康
     * @Date: 2023-04-17 10:18:26 +0800
     */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      return this.mergeCells[rowIndex * this.colFields.length + columnIndex];
    },
    /**
     * @description: 初始化
     * @return {*}
     * @author: 杜康
     * @Date: 2023-04-17 10:15:01 +0800
     */
    init() {
      const { headers, body, mergeCells, colFields } = this.data;
      this.headers = headers;
      this.tableData = body;
      this.mergeCells = mergeCells;
      this.colFields = colFields;
    },
  },
};
</script>

<style lang="less" >
@tableHoverColor: #2cce34;

/* 表格鼠标悬浮时的样式（高亮） */
// .el-table--enable-row-hover {
//   .el-table__body {
//     tr {
//       &:hover {
//         background: rgb(184, 224, 250);
//         border: 1px solid #313463;
//       }
//     }
//   }
// }
/*表格鼠标悬停的样式（背景颜色）*/
.el-table {
  tbody {
    tr {
      &:hover {
        > td {
          background-color: @tableHoverColor !important;
        }
      }
    }
  }
}
// 可用代码
// @tableHoverColor: #f6faf9;
// //表格鼠标悬停的样式（背景颜色）
// .el-table__body {
//   .el-table__row.hover-row td {
//     background-color: @tableHoverColor !important;
//   }
// }

// //表格鼠标悬浮时的样式 （高亮）
// .el-table--enable-row-hover {
//   .el-table__body {
//     tr {
//       &:hover {
//         background-color: @tableHoverColor !important;
//       }
//     }
//   }
// }
</style>
